import {
  AppBar,
  Button,
  createStyles,
  Dialog,
  IconButton,
  List,
  ListItem,
  ListItemSecondaryAction,
  ListItemText,
  Slide,
  Switch,
  Theme,
  Toolbar,
  Typography,
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { TransitionProps } from '@material-ui/core/transitions';
import { Close } from '@material-ui/icons';
import React from 'react';
import { useSettings } from '../context';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    appBar: {
      position: 'relative',
    },
    title: {
      marginLeft: theme.spacing(2),
      flex: 1,
    },
  }),
);

const Transition = React.forwardRef(function Transition (
  props: TransitionProps & { children?: React.ReactElement },
  ref: React.Ref<unknown>,
) {
  return <Slide direction="up" ref={ref} {...props} />;
});

interface SettingsDialogProps {
  open: boolean;
  onClose: () => void;
}

const SettingsDialog: React.FC<SettingsDialogProps> = (props) => {
  const { open, onClose: handleClose } = props;
  const classes = useStyles();
  const { rtl, setRtl } = useSettings();

  return (
    <Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>
      <AppBar className={classes.appBar}>
        <Toolbar>
          <IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
            <Close/>
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            设置
          </Typography>
          <Button autoFocus color="inherit" onClick={handleClose}>
            保存
          </Button>
        </Toolbar>
      </AppBar>

      <List>
        <ListItem>
          <ListItemText id="switch-rtl" primary="日漫模式"/>
          <ListItemSecondaryAction>
            <Switch
              edge="end"
              onChange={e => setRtl(e.target.checked)}
              checked={rtl}
            />
          </ListItemSecondaryAction>
        </ListItem>
      </List>
    </Dialog>
  );
};

export default SettingsDialog;
